<template>
  <div class="production-debug">
    <h1>生产环境诊断页面</h1>
    <p>用于诊断Nginx环境中的问题</p>
    
    <div class="debug-sections">
      <!-- 环境信息 -->
      <div class="debug-section">
        <h3>环境信息</h3>
        <div class="info-grid">
          <div v-for="(value, key) in environmentInfo" :key="key" class="info-item">
            <strong>{{ key }}:</strong> {{ typeof value === 'object' ? JSON.stringify(value) : value }}
          </div>
        </div>
      </div>
      
      <!-- Nginx环境检测 -->
      <div class="debug-section">
        <h3>Nginx环境检测</h3>
        <div class="info-grid">
          <div v-for="(value, key) in nginxInfo" :key="key" class="info-item">
            <strong>{{ key }}:</strong> {{ value }}
          </div>
        </div>
      </div>
      
      <!-- 性能信息 -->
      <div class="debug-section">
        <h3>性能信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <strong>页面加载时间:</strong> {{ loadTime }}ms
          </div>
          <div v-if="navigationTiming" class="info-item">
            <strong>DOM加载时间:</strong> {{ navigationTiming.domContentLoaded }}ms
          </div>
          <div v-if="navigationTiming" class="info-item">
            <strong>完全加载时间:</strong> {{ navigationTiming.loadComplete }}ms
          </div>
          <div v-if="navigationTiming" class="info-item">
            <strong>总加载时间:</strong> {{ navigationTiming.total }}ms
          </div>
        </div>
      </div>
      
      <!-- 资源加载 -->
      <div class="debug-section">
        <h3>资源加载情况</h3>
        <div class="resource-list">
          <div v-for="resource in resources" :key="resource.name" class="resource-item">
            <div class="resource-name">{{ resource.name }}</div>
            <div class="resource-details">
              <span>类型: {{ resource.type }}</span>
              <span>大小: {{ resource.size }}B</span>
              <span>耗时: {{ resource.duration }}ms</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 错误信息 -->
      <div class="debug-section">
        <h3>错误信息</h3>
        <div v-if="errors.length === 0" class="no-errors">
          暂无错误
        </div>
        <div v-else class="error-list">
          <div v-for="(error, index) in errors" :key="index" class="error-item">
            <div class="error-type">{{ error.type }}</div>
            <div class="error-message">{{ error.message || error.reason }}</div>
            <div class="error-time">{{ new Date(error.timestamp).toLocaleTimeString() }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 测试按钮 -->
    <div class="test-buttons">
      <button @click="testSidebarToggle">测试侧边栏切换</button>
      <button @click="testRouterNavigation">测试路由导航</button>
      <button @click="testLocalStorage">测试LocalStorage</button>
      <button @click="clearErrors">清除错误记录</button>
      <button @click="refreshPage">刷新页面</button>
    </div>
    
    <!-- 测试结果 -->
    <div class="test-results">
      <h3>测试结果</h3>
      <div v-for="(result, index) in testResults" :key="index" :class="['test-result', result.type]">
        {{ result.time }}: {{ result.message }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  getEnvironmentInfo, 
  isNginxEnvironment, 
  monitorPerformance, 
  setupErrorMonitoring, 
  monitorResourceLoading 
} from '@/utils/environment'

const router = useRouter()
const environmentInfo = ref({})
const nginxInfo = ref({})
const loadTime = ref(0)
const navigationTiming = ref(null)
const resources = ref([])
const errors = ref([])
const testResults = ref([])

let performanceMonitor = null
let errorMonitor = null

onMounted(() => {
  // 初始化监控
  performanceMonitor = monitorPerformance()
  errorMonitor = setupErrorMonitoring()
  
  // 获取环境信息
  environmentInfo.value = getEnvironmentInfo()
  nginxInfo.value = isNginxEnvironment()
  
  // 获取性能信息
  setTimeout(() => {
    loadTime.value = Math.round(performanceMonitor.getLoadTime())
    navigationTiming.value = performanceMonitor.getNavigationTiming()
    resources.value = monitorResourceLoading()
    
    // 获取错误信息
    errors.value = errorMonitor.getErrors()
    
    addTestResult('页面加载完成', 'success')
  }, 100)
})

const addTestResult = (message, type = 'info') => {
  testResults.value.push({
    time: new Date().toLocaleTimeString(),
    message,
    type
  })
}

const testSidebarToggle = () => {
  try {
    // 模拟侧边栏切换
    const event = new CustomEvent('toggle-sidebar')
    window.dispatchEvent(event)
    addTestResult('侧边栏切换事件已触发', 'success')
  } catch (error) {
    addTestResult(`侧边栏切换测试失败: ${error.message}`, 'error')
  }
}

const testRouterNavigation = () => {
  try {
    router.push('/home')
    addTestResult('路由导航测试成功', 'success')
  } catch (error) {
    addTestResult(`路由导航测试失败: ${error.message}`, 'error')
  }
}

const testLocalStorage = () => {
  try {
    localStorage.setItem('test', 'test-value')
    const value = localStorage.getItem('test')
    localStorage.removeItem('test')
    addTestResult(`LocalStorage测试成功: ${value}`, 'success')
  } catch (error) {
    addTestResult(`LocalStorage测试失败: ${error.message}`, 'error')
  }
}

const clearErrors = () => {
  if (errorMonitor) {
    errorMonitor.clearErrors()
    errors.value = []
    addTestResult('错误记录已清除', 'success')
  }
}

const refreshPage = () => {
  window.location.reload()
}
</script>

<style scoped>
.production-debug {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.debug-sections {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
}

.debug-section {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #f9f9f9;
}

.debug-section h3 {
  margin-top: 0;
  color: #666;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.info-grid {
  display: grid;
  gap: 8px;
}

.info-item {
  background: white;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
}

.resource-list {
  max-height: 300px;
  overflow-y: auto;
}

.resource-item {
  background: white;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
  border-left: 3px solid #007bff;
}

.resource-name {
  font-weight: bold;
  margin-bottom: 5px;
  word-break: break-all;
}

.resource-details {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

.error-list {
  max-height: 300px;
  overflow-y: auto;
}

.error-item {
  background: #fff5f5;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
  border-left: 3px solid #dc3545;
}

.error-type {
  font-weight: bold;
  color: #dc3545;
  margin-bottom: 5px;
}

.error-message {
  font-size: 14px;
  margin-bottom: 5px;
}

.error-time {
  font-size: 12px;
  color: #666;
}

.no-errors {
  text-align: center;
  color: #28a745;
  font-style: italic;
}

.test-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

.test-results {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background: #f8f9fa;
  max-height: 300px;
  overflow-y: auto;
}

.test-result {
  margin: 5px 0;
  padding: 5px;
  border-radius: 4px;
}

.test-result.success {
  color: #28a745;
  background: #d4edda;
}

.test-result.error {
  color: #dc3545;
  background: #f8d7da;
}

.test-result.info {
  color: #17a2b8;
  background: #d1ecf1;
}
</style> 